<template>
  <div
    ref="previewContent"
    style="width: 100%; background: transparent; display: flex; justify-content: center; align-items: flex-start"
  >
    <div :style="mainStyle" class="pre_view" id="pre_view" style>
      <span :style="technicalSupportStyle">象过河软件技术支持</span>
      <span :style="printTimeStyle" v-if="baseData[0].showPrintTime">打印时间：{{ baseData[0].printTime }}</span>
      <div class="logo" :style="logoStyle" v-if="baseData[2].logo.selected">
        <el-image style="width: 100%; height: 100%" :src="baseData[2].logo.url" fit="contain"></el-image>
      </div>
      <!-- <div class="title" :style="titleStyle">{{ baseData[2].titleStyle.content }}</div>
      <div class="title" :style="subTitleStyle">{{ baseData[2].subTitleStyle.content }}</div> -->
      <div
        v-if="['针式打印三联', '三等分', 's3'].includes(baseData[1].typeValue)"
        :style="{
          display: 'flex',
          'text-align': 'center',
          'margin-top': this.scale * 10 + 'px',
          'align-items': 'center',
        }"
      >
        <div class="title" :style="titleStyle">{{ baseData[2].titleStyle.content }}</div>
        <div class="title" :style="subTitleStyle">{{ baseData[2].subTitleStyle.content }}</div>
      </div>
      <div v-else :style="{ 'text-align': 'center', 'margin-top': this.scale * 20 + 'px' }">
        <div :style="titleStyle">{{ baseData[2].titleStyle.content }}</div>
        <div :style="subTitleStyle">{{ baseData[2].subTitleStyle.content }}</div>
      </div>

      <div class="bill_head" :style="billHeadStyle">
        <div :style="billHeadLeftStyle">
          <div v-for="(item, index) in baseData[4].columnData" :key="index">
            <div v-if="item.selected" :style="{ 'margin-right': scale * 30 + 'px' }">
              {{ item.name }}： {{ item.value }}
            </div>
          </div>
        </div>
        <div :style="billHeadRightStyle">
          <div :style="billHeadRightContentStyle">
            <span v-if="Object.keys(baseData[4].otherData).includes('orderTime')"
              >订单日期：{{ baseData[4].otherData.orderTime }}</span
            >
            <span v-else-if="Object.keys(baseData[4].otherData).includes('outTime')"
              >{{ baseData[4].otherData.text }}：{{ baseData[4].otherData.outTime }}</span
            >
            <span v-else-if="Object.keys(baseData[4].otherData).includes('putTime')"
              >{{ baseData[4].otherData.text }}：{{ baseData[4].otherData.putTime }}</span
            >
            <span>单据编号：{{ baseData[4].otherData.orderNumber }}</span>
          </div>
          <!-- <span v-if="Object.keys(baseData[4].otherData).includes('orderTime')"
            >订单日期：{{ baseData[4].otherData.orderTime }}</span
          >
          <span v-else-if="Object.keys(baseData[4].otherData).includes('outTime')"
            >{{ baseData[4].otherData.text }}：{{ baseData[4].otherData.outTime }}</span
          >
          <span v-else-if="Object.keys(baseData[4].otherData).includes('putTime')"
            >{{ baseData[4].otherData.text }}：{{ baseData[4].otherData.putTime }}</span
          >
          <span>单据编号：{{ baseData[4].otherData.orderNumber }}</span> -->
        </div>
      </div>
      <div style="width: 100%; display: flex; justify-content: flex-start">
        <div class="bill_body" id="bill_body" :style="billBodyStyle">
          <el-table
            style="border: 1px solid black"
            :summary-method="getSummaries"
            highlight-current-row
            :header-cell-style="headerCellStyle"
            :cell-style="cellStyle"
            :data="baseData[5].tableData"
            width="100%"
          >
            <!-- <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column> -->
            <template v-for="(item, index) in baseData[5].columnData">
              <el-table-column
                v-if="item.morenState"
                :label="item.morenName"
                :prop="item.props"
                :width="Math.ceil(item.width * scale)"
              ></el-table-column>
            </template>
            <div slot="append" style="display: flex; background: #ededed" class="append">
              <div v-if="baseData[0].type" :style="tableFootStyleByabs" id="xsckdId">
                <span style="margin-right: 20px">合计</span>
                <!-- {{ getshowValueByXSCKD() }}11111 -->
                共{{ baseData[5].tableData.length }}条明细
              </div>
              <template v-for="(item, sumIndex) in baseData[5].columnData">
                <div
                  v-if="item.morenState"
                  :style="{
                    width: Math.ceil(item.width * scale) + 'px',
                    height: parseInt(scale * baseData[3].footHeight),
                    padding: '2px 3px',
                    flexShrink: 0,
                  }"
                >
                  <!-- <div v-if="sumIndex == 0" style="text-align: center;" :style="tableFootStyle">合计</div> -->
                  <div style="text-align: right; padding-right: -1px" :style="tableFootStyleBySum">
                    {{ getshowValue(item, sumIndex) }}
                  </div>
                </div>
              </template>
            </div>
          </el-table>
        </div>
      </div>
      <div class="bill_foot" :style="billFootStyle">
        <div :style="billFootLeftStyle">
          <div v-for="(item, index) in baseData[6].columnData" :key="index">
            <div v-if="item.selected" :style="{ 'margin-right': scale * 30 + 'px' }">
              {{ item.name }}： {{ item.value }}
            </div>
          </div>
        </div>
        <div :style="billFootRightStyle">
          <span style="margin-right: 10px">制单人：{{ baseData[6].otherData.createName }}</span>
          <span>制单日期：{{ baseData[6].otherData.createOrderDate }}</span>
        </div>
      </div>

      <div :style="bottomStyle">
        <div v-for="item in baseData[7].qrList" :key="item.id" style="display: flex; align-items: center">
          <template v-if="item.selected">
            <span :style="{ 'font-size': scale * 10 + 'px' }">{{ item.title }}</span>
            <div :style="qrImgStyle">
              <img :style="{ width: '100%', height: '100%' }" :src="item.url" />
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    baseData: Array,
    tipsData: Object,
    isPrint: Boolean,
  },
  data() {
    return {
      dialogVisible: false,
      text: '',
      isUpdate: false,
      tableData: [],
      codeList: [],
      finishStatus: false,
      inputFocus: false,
      domReady: false,
      scale: 1, //比例
      printTime: '',
    }
  },
  created() {},
  mounted() {
    let that = this
    this.$nextTick(() => {
      that.domReady = true
    })
  },
  activated() {
    // let preView = document.getElementById('pre_view')
    // console.log(preView);
  },
  computed: {
    mainStyle() {
      if (this.domReady && this.baseData.length > 0) {
        let padding = this.baseData[1].padding
        let item = this.baseData[1]

        // let w = 0
        // let h = 0
        // if (item.directionValue == '横向') {
        //   w = item.typeValue == 'A4' ? 1123 : 794
        //   h = item.typeValue == 'A4' ? 794 : 559
        // } else {
        //   w = item.typeValue == 'A4' ? 794 : 559
        //   h = item.typeValue == 'A4' ? 1123 : 794
        // }
        // w = w - 20
        // h = h - 60
        let size = this.getPageSize()
        console.log(this.getPageSize())
        let w = size.w
        let h = size.h
        // w = item.typeValue == 'A4' ? 1123 : 794
        // h = item.typeValue == 'A4' ? 794 : 559
        // w = w - 20
        // h = h - 60
        let availableWidth =
          this.$refs.previewContent && this.$refs.previewContent.offsetWidth ? this.$refs.previewContent.offsetWidth : w
        let width = Math.min(w, availableWidth)
        // let height = h
        this.scale = width / w

        console.log('比例：', this.scale)

        let params = {
          width: width + 'px',
          // height: height + 'px',
          'padding-top': this.scale * padding.top + 'px',
          'padding-bottom': this.scale * padding.bottom + 'px',
          'padding-left': this.scale * padding.left + 'px',
          'padding-right': this.scale * padding.right + 'px',
          backgroundColor: '#fff',
          position: 'relative',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }

        if (this.isPrint) {
          params = {
            width: width + 'px',
            // 'height': height + 'px',
            'padding-top': this.scale * padding.top + 'px',
            'padding-bottom': this.scale * padding.bottom + 'px',
            'padding-left': this.scale * padding.left + 'px',
            'padding-right': this.scale * padding.right + 'px',
            backgroundColor: '#fff',
            position: 'relative',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
          }
        }

        return params
      }
      return ''
    },
    // logo
    logoStyle() {
      let is3 = ['针式打印三联', '三等分', 's3'].includes(this.baseData[1].typeValue)
      return {
        // position: 'absolute',
        // top: this.scale * 36 + 'px',
        // left: this.scale * 67 + 'px',
        // 'z-index': 1,
        // width: this.scale * 120 + 'px',
        // height: this.scale * 40 + 'px',
        position: 'absolute',
        top: is3 ? this.scale * 35 + 'px' : this.scale * 35 + 'px',
        left: is3 ? this.scale * 35 + 'px' : this.scale * 67 + 'px',
        'z-index': 1,
        width: is3 ? this.scale * 90 + 'px' : this.scale * 120 + 'px',
        height: is3 ? this.scale * 30 + 'px' : this.scale * 40 + 'px',
        'font-family': 'Microsoft YaHei !important',
        color: '#000 !important',
      }
    },

    // 主标题
    titleStyle() {
      let item = this.baseData[2].titleStyle
      let is3 = ['针式打印三联', '三等分', 's3'].includes(this.baseData[1].typeValue)
      return {
        // 'margin-top': this.scale * 20 + 'px',
        'font-size': this.scale * item.size + 'px',
        'font-weight': item.bold ? '600' : '400',
        'text-decoration': item.underline ? 'underline' : 'none',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    // 副标题
    subTitleStyle() {
      let item = this.baseData[2].subTitleStyle
      return {
        // 'margin-top': this.scale * 3 + 'px',
        'font-size': this.scale * item.size + 'px',
        'font-weight': item.bold ? '600' : '400',
        'text-decoration': item.underline ? 'underline' : 'none',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadStyle() {
      return {
        fontSize: 12 + 'px',
        marign: '10px 0 5px',
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadLeftStyle() {
      return {
        fontSize: 12 + 'px',
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'flex-end',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadRightStyle() {
      return {
        fontSize: 12 + 'px',
        display: 'flex',
        whiteSpace: 'nowrap',
        flexDirection: 'column',
        alignItems: 'flex-start',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billHeadRightContentStyle() {
      let is3 = ['针式打印三联', '三等分', 's3'].includes(this.baseData[1].typeValue)
      if (is3) {
        return {
          display: 'flex',
          flexDirection: 'column-reverse',
          height: this.scale * 40 + 'px',
          flexWrap: 'wrap-reverse',
          justifyContent: 'flex-start',
          color: '#000000',
          'font-family': 'Microsoft YaHei !important',
        }
      } else {
        return {
          display: 'flex',
          whiteSpace: 'nowrap',
          flexDirection: 'column-reverse',
          alignItems: 'flex-start',
          color: '#000000',
          'font-family': 'Microsoft YaHei !important',
        }
      }
    },
    billBodyStyle() {
      return {
        // width: '100%',
        overflow: 'hidden',
        overflowX: 'clip',
        margin: '5px 0',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    tableFootStyle() {
      let h = parseInt(this.scale * this.baseData[3].footHeight)
      let size = this.baseData[2].tableBody.size
      let height = Math.max(20, h)
      return {
        height: height + 'px',
        fontWeight: this.baseData[2].tableBody.bold ? '600' : '400',
        fontSize: this.scale * size + 'px',
        lineHeight: height + 'px',
        borderRight: '1px solid black',
        minHeight: '20px',
        padding: '0 10px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    headerCellStyle() {
      console.log(this.scale * this.baseData[3].headHeight)
      return {
        textAlign: 'center',
        height: this.scale * this.baseData[3].headHeight + 'px',
        borderRight: '1px solid black',
        borderBottom: '1px solid black',
        backgroundColor: '#ededed',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    cellStyle() {
      let height = parseInt(this.scale * this.baseData[3].rowHeight)
      console.log(height)
      return {
        borderRight: '1px solid black',
        borderBottom: '1px solid black',
        textAlign: 'center',
        height: height + 'px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billFootStyle() {
      return {
        fontSize: 12 + 'px',
        marign: '10px 0 5px',
        width: '100%',
        display: 'flex',
        justifyContent: 'space-between',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billFootLeftStyle() {
      return {
        fontSize: 12 + 'px',
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    billFootRightStyle() {
      return {
        fontSize: 12 + 'px',
        display: 'flex',
        whiteSpace: 'nowrap',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    qrImgStyle() {
      return {
        width: this.scale * 60 + 'px',
        height: this.scale * 60 + 'px',
        // 'padding': this.scale * 5 + 'px',
        margin: this.scale * 10 + 'px',
      }
    },
    // 技术支持
    technicalSupportStyle() {
      return {
        'font-size': this.scale * 10 + 'px',
        position: 'absolute',
        top: this.scale * 12 + 'px',
        left: this.scale * 22 + 'px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    printTimeStyle() {
      let padding = this.baseData[1].padding
      return {
        color: '#666666',
        'font-size': this.scale * 8 + 'px',
        position: 'absolute',
        top: this.scale * (padding.top + 12) + 'px',
        right: this.scale * 22 + 'px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    bottomStyle() {
      let padding = this.baseData[1].padding
      return {
        // 'bottom': this.scale * padding.bottom + 'px',
        // 'left': this.scale * padding.left + 'px',
        // 'right': this.scale * padding.right + 'px',
        // position: 'absolute',
        width: '100%',
        display: 'flex',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    tableFootStyleBySum() {
      let h = parseInt(this.scale * this.baseData[3].footHeight)
      let height = Math.max(20, h)
      return {
        // height: height + 'px',
        fontSize: 12 + 'px',
        fontWeight: this.baseData[2].tableBody.bold ? '600' : '400',
        // lineHeight: height + 'px',
        minHeight: '20px',
        // padding: '0 10px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
      }
    },
    tableFootStyleByabs(item) {
      let h = parseInt(this.scale * this.baseData[3].footHeight)
      let height = Math.max(20, h)
      // console.log(item);
      return {
        // height: height + 'px',
        fontSize: 12 + 'px',
        fontWeight: this.baseData[2].tableBody.bold ? '600' : '400',
        // lineHeight: height + 'px',
        minHeight: '20px',
        padding: '0 10px',
        color: '#000000',
        'font-family': 'Microsoft YaHei !important',
        boxSizing: 'border-box',
        textAlign: 'right',
        position: 'absolute',
        left: '0px',
        width: 'max-content',
        zIndex: '10',
      }
    },
  },
  methods: {
    getPageSize() {
      let max = 1123
      let min = 794
      let value = this.baseData[1].typeValue
      console.log(this.baseData[1], '123')
      switch (value) {
        case 's1':
          return {
            w: min,
            h: max - 20,
          }
          break
        case 's2':
        case '二等分':
        case '针式打印二联':
        case 'A5':
          return {
            w: min,
            h: max / 2 - 20,
          }
          break
        case 's3':
          return {
            w: min,
            h: max / 3 - 20,
          }
          break
        case 'h1':
        case 'A4':
          return {
            w: max,
            h: min - 20,
          }
          break
        case 'h2':
          return {
            w: max,
            h: min / 2 - 20,
          }
          break

        default:
          break
      }
    },
    // 合计列计算
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + data.length + '条明细'
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    getshowValue(item, index, parted = false) {
      // let back = ''
      // if (index === 0) {
      //   back = '合计'
      // } else if (index === 1) {
      //   let length = 0
      //   if(this.baseData && this.baseData[5].tableData) {
      //     length = this.baseData[5].tableData.length
      //   }
      //   back = '共' + length + '条明细'
      // }
      // return back

      let back = ''
      let moneyArr = ['price', 'priceShow']
      let numberArr = ['number', 'numberShow']
      if (moneyArr.includes(item.props) || numberArr.includes(item.props)) {
        let list = this.baseData[5].tableData
        let result = 0.0
        for (let i = 0; i < list.length; i++) {
          const element = list[i]
          let num = Number(element[item.props])
          result += num
        }
        if (moneyArr.includes(item.props)) {
          back = this.$formatMoney(result)
        } else {
          back = this.$formatNumber(result)
        }
      }
      // else {
      //   let list = this.baseData[5].columnData
      //   if (index < list.length - 1) {
      //     let it = list[index + 1]
      //     if (moneyArr.includes(it.props)) {
      //       back = '合计'
      //     }
      //   }
      // }
      return back
    },
    getshowValueByXSCKD() {
      let list = this.baseData[5].tableData
      console.log(list)
      let result = 0.0
      for (let i = 0; i < list.length; i++) {
        const element = list[i]
        let num = Number(element['price'])
        result += num
      }
      // let back = this.moneyToChinese(result)
      console.log(back)
      let back = this.toChinese(result)
      return back
    },
    toChinese(num) {
      console.log(num)
      let isMinus = num < 0
      let Num = num.toString()
      for (let i = Num.length - 1; i >= 0; i--) {
        Num = Num.replace(',', '') //替换tomoney()中的“,”
        Num = Num.replace(' ', '') //替换tomoney()中的空格
        Num = Num.replace('-', '') //替换tomoney()中的负号
      }
      Num = Num.replace('￥', '') //替换掉可能出现的￥字符
      if (isNaN(Num)) {
        //验证输入的字符是否为数字
        // alert("请检查小写金额是否正确");
        return
      }
      //---字符处理完毕，开始转换，转换采用前后两部分分别转换---//
      let part = String(Num).split('.')
      let newchar = ''
      //小数点前进行转化
      for (let i = part[0].length - 1; i >= 0; i--) {
        if (part[0].length > 11) {
          alert('位数过大，无法计算')
          return ''
        } //若数量超过百亿单位，提示
        let tmpnewchar = ''
        let perchar = part[0].charAt(i)
        switch (perchar) {
          case '0':
            tmpnewchar = '零' + tmpnewchar
            break
          case '1':
            tmpnewchar = '壹' + tmpnewchar
            break
          case '2':
            tmpnewchar = '贰' + tmpnewchar
            break
          case '3':
            tmpnewchar = '叁' + tmpnewchar
            break
          case '4':
            tmpnewchar = '肆' + tmpnewchar
            break
          case '5':
            tmpnewchar = '伍' + tmpnewchar
            break
          case '6':
            tmpnewchar = '陆' + tmpnewchar
            break
          case '7':
            tmpnewchar = '柒' + tmpnewchar
            break
          case '8':
            tmpnewchar = '捌' + tmpnewchar
            break
          case '9':
            tmpnewchar = '玖' + tmpnewchar
            break
        }

        switch (part[0].length - i - 1) {
          case 0:
            tmpnewchar = tmpnewchar + '元'
            break
          case 1:
            if (perchar != 0) tmpnewchar = tmpnewchar + '拾'
            break
          case 2:
            if (perchar != 0) tmpnewchar = tmpnewchar + '佰'
            break
          case 3:
            if (perchar != 0) tmpnewchar = tmpnewchar + '仟'
            break
          case 4:
            tmpnewchar = tmpnewchar + '万'
            break
          case 5:
            if (perchar != 0) tmpnewchar = tmpnewchar + '拾'
            break
          case 6:
            if (perchar != 0) tmpnewchar = tmpnewchar + '佰'
            break
          case 7:
            if (perchar != 0) tmpnewchar = tmpnewchar + '仟'
            break
          case 8:
            tmpnewchar = tmpnewchar + '亿'
            break
          case 9:
            tmpnewchar = tmpnewchar + '拾'
            break
        }
        newchar = tmpnewchar + newchar
      }
      //小数点之后进行转化
      if (Num.indexOf('.') != -1) {
        if (part[1].length > 2) {
          part[1] = part[1].substr(0, 2)
        }
        for (let i = 0; i < part[1].length; i++) {
          let tmpnewchar = ''
          let perchar = part[1].charAt(i)
          switch (perchar) {
            case '0':
              tmpnewchar = '零' + tmpnewchar
              break
            case '1':
              tmpnewchar = '壹' + tmpnewchar
              break
            case '2':
              tmpnewchar = '贰' + tmpnewchar
              break
            case '3':
              tmpnewchar = '叁' + tmpnewchar
              break
            case '4':
              tmpnewchar = '肆' + tmpnewchar
              break
            case '5':
              tmpnewchar = '伍' + tmpnewchar
              break
            case '6':
              tmpnewchar = '陆' + tmpnewchar
              break
            case '7':
              tmpnewchar = '柒' + tmpnewchar
              break
            case '8':
              tmpnewchar = '捌' + tmpnewchar
              break
            case '9':
              tmpnewchar = '玖' + tmpnewchar
              break
          }
          if (i == 0) tmpnewchar = tmpnewchar + '角'
          if (i == 1) tmpnewchar = tmpnewchar + '分'
          newchar = newchar + tmpnewchar
        }
      }
      //替换所有无用汉字
      while (newchar.search('零零') != -1) newchar = newchar.replace('零零', '零')
      newchar = newchar.replace('零亿', '亿')
      newchar = newchar.replace('亿万', '亿')
      newchar = newchar.replace('零万', '万')
      if (newchar != '零元') {
        if (newchar.substring(0, 2) == '零元') newchar = newchar.replace('零元', '')
        else newchar = newchar.replace('零元', '元')
      }
      newchar = newchar.replace('零角', '')
      newchar = newchar.replace('零分', '')

      if (newchar.charAt(newchar.length - 1) == '元' || newchar.charAt(newchar.length - 1) == '角') {
        newchar = newchar + '整'
      }
      if (isMinus) {
        newchar = '负' + newchar
      }
      return newchar
    },
  },
}
</script>

<style lang="scss" scoped media="print">
@media print {
  .sum_item {
    font-weight: 600;
    background: transparent;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    border-bottom: #333333 solid 1px;
    // height: 20px;
  }
  ::v-deep .el-table .el-table__body td,
  .el-table .el-table__header th {
    border-color: black;
  }
}
.pre_view {
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  color: #000000;
}

.bottom_view {
  position: absolute;
  // bottom: 0;
  // width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.qr_item {
  display: flex;
  align-items: center;
}

.bill_head {
  margin: 10px 0 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    white-space: nowrap;
  }
}

.bill_foot {
  margin: 10px 0 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .left {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .right {
    display: flex;
    white-space: nowrap;
  }
}

.bill_body {
  // width: 100%;
  overflow: hidden;
  overflow-x: clip;
}

::v-deep .el-table {
  // border: 1px solid #e3e3e3;
  border-bottom: none;
  box-sizing: border-box;
  height: 100%;
  table-layout: auto !important;
  th,
  td {
    padding: 0;
    color: #666;
    box-sizing: border-box;
    // border-right: 1px solid #e3e3e3;

    .cell {
      display: flex;
      align-items: center;
      font-size: 12px;
      padding: 2px 3px;
      line-height: 16px;
      // white-space: nowrap;
    }
  }

  th {
    .cell {
      background: #ededed;
      justify-content: center;
    }
  }

  .el-table__body tr:hover > td {
    background: #e3f6ff;
  }

  .el-table__footer-wrapper {
    td {
      background: #f4f4f4;
      border: none;
    }
  }

  ::-webkit-scrollbar {
    display: none;
  }
}
::v-deep .el-table__header .has-gutter tr > th:nth-last-child(2) {
  border-right: none !important;
}
::v-deep .el-table__body tr > td:last-child {
  border-right: none !important;
}
</style>
<style>
@media print {
  /* 确保边框正常显示 */
  .el-table th .cell {
    background: unset !important;
    /* height: 30px !important; */
  }
  .el-table th {
    background: unset !important;
    /* height: 30px !important; */
  }
  /* .el-table td{
    height: 60px !important;
  } */
  .el-table tr {
    background: transparent !important;
    /* height: 30px !important; */
  }
  .append {
    background: unset !important;
  }
  .el-table::before {
    background: transparent !important;
  }
  .el-table::after {
    background: transparent !important;
  }
}
</style>
